<template>
    <h2>一个人的信息</h2>
    <h3>姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <button @click="test">测试触发一次Demo组件的sayHello事件</button>
    <slot name="qwe"></slot>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'Demo',
  props: ['msg', 'school'], //如果props不声明接收的参数名，则父组件传递的参数会被放到attrs中
  emits: [
    'sayHello' //vue3声明子组件被绑定的自定义事件，不写会有警告
  ],
  beforeCreate() {
    console.log('---beforeCreate()---', this)
  },    
  setup(props, context) {
    //setup两个注意点
    //1. setup执行的时机早于beforeCreate，只执行一次，内部的this是undefined
    console.log('---setup()---', this)
    console.log('---setup参数', props, context)
    //2. setup有2个参数
    /*
        参数props：封装了vue2中的props属性
        参数context：相当于一个简化的vc对象，即vue2中的this，里面有attrs、emit、slots等属性
    */

    let person = reactive({
        name: '张三',
        age: 18,
    })

    function test() {
        //通过上下文触发自定义事件
        context.emit('sayHello', 666)
    }

    console.log('---context.slots---', context.slots) //展示组件接收的插槽内容（虚拟dom）

    return {
        person,
        test,
    }
  }
}
</script>

<style>
</style>